import React from 'react';

import { system_realtimedata } from '../utils/api'
import * as echarts from 'echarts';
import { useEffect } from 'react';
function RealtimeEcharts(props) {

    useEffect(() => {
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);

        system_realtimedata().then((res)=>{
            var option = {
                title: { //图表的标题
                    text: '在线服务数据趋势',
                    left: 'center'
                },
                legend: { //显示图例
                    top: 30
                },
                tooltip: {}, //悬浮提示
                xAxis: {
                    type: 'category',
                    data: res.data.list.xAxis
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name:res.data.list.series[0].name,
                        label: { show: true, position: 'top' },
                        data: res.data.list.series[0].data,
                        type: 'line'
                    },
                    {
                        name:res.data.list.series[1].name,
                        label: { show: true, position: 'top' },
        
                        data: res.data.list.series[1].data,
                        type: 'line'
                    }
                ]
            };
            option && myChart.setOption(option);
        })
  
    }, [])

    return (
        <div id="main"></div>
    );
}

export default RealtimeEcharts;